{% extends 'base.html' %}

{% block title %}About | {% endblock title %}

{% block body %}

<!-- ======= Hero Section ======= -->
<section class="hero-section text-white d-flex align-items-center justify-content-center text-center">
  <div>
    <h1 class="fw-bold mb-3 display-5">About UpdateGadh Turf</h1>
    <p class="lead">Your trusted platform to book and manage turf sessions — fast, simple, and reliable.</p>
  </div>
</section>

<!-- ======= Contact Cards ======= -->
<section class="py-5 bg-light">
  <div class="container">
    <h2 class="text-center fw-bold mb-5">Get in Touch</h2>
    <div class="row justify-content-center g-4">

      <!-- Address -->
      <div class="col-lg-3 col-md-6">
        <div class="card text-center border-0 shadow-lg p-3 card-hover">
          <div class="icon-circle bg-primary mb-3">
            <i class="bi bi-geo-alt-fill text-white fs-3"></i>
          </div>
          <img src="static/map_1.png" class="card-img-top rounded-3 mb-3" alt="Address" />
          <h5 class="fw-semibold">Address</h5>
          <p class="text-muted mb-3">UpdateGadh.com</p>
          <a href="#" target="_blank" class="btn btn-primary w-100">View on Map</a>
        </div>
      </div>

      <!-- Instagram -->
      <div class="col-lg-3 col-md-6">
        <div class="card text-center border-0 shadow-lg p-3 card-hover">
          <div class="icon-circle bg-danger mb-3">
            <i class="bi bi-instagram text-white fs-3"></i>
          </div>
          <img src="static/insta_1.png" class="card-img-top rounded-3 mb-3" alt="Instagram" />
          <h5 class="fw-semibold">Instagram</h5>
          <p class="text-muted mb-3">Visit and follow our Instagram page for updates.</p>
          <a href="https://www.instagram.com/projectswithsourcecode/" target="_blank" class="btn btn-outline-danger w-100">Follow Us</a>
        </div>
      </div>

      <!-- WhatsApp -->
      <div class="col-lg-3 col-md-6">
        <div class="card text-center border-0 shadow-lg p-3 card-hover">
          <div class="icon-circle bg-success mb-3">
            <i class="bi bi-whatsapp text-white fs-3"></i>
          </div>
          <img src="static/whatsapp.png" class="card-img-top rounded-3 mb-3" alt="WhatsApp" />
          <h5 class="fw-semibold">WhatsApp</h5>
          <p class="text-muted mb-3">Contact us anytime via WhatsApp for quick support.</p>
          <a href="#" target="_blank" class="btn btn-outline-success w-100">Chat Now</a>
        </div>
      </div>

      <!-- Call -->
      <div class="col-lg-3 col-md-6">
        <div class="card text-center border-0 shadow-lg p-3 card-hover">
          <div class="icon-circle bg-info mb-3">
            <i class="bi bi-telephone-fill text-white fs-3"></i>
          </div>
          <img src="static/phone.png" class="card-img-top rounded-3 mb-3" alt="Call" />
          <h5 class="fw-semibold">Call Us</h5>
          <p class="text-muted mb-3">Feel free to call us anytime for more details.</p>
          <a href="3" target="_blank" class="btn btn-outline-info w-100">Call Now</a>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ======= Turf Info Section ======= -->
<section class="turf-info-section text-white text-center py-5">
  <div class="container">
    <h2 class="fw-bold mb-4">About The Turf</h2>
    <div class="info-text mx-auto" style="max-width: 700px;">
      <p class="fs-5 mb-3">🏏 The playground covers <strong>6000 sq. feet</strong> with dimensions of 60 × 100.</p>
      <p class="fs-5 mb-3">🎮 The playstation area is a closed zone of <strong>400 sq. feet</strong> (10 × 40).</p>
      <p class="fs-5 mb-0">👨‍💼 Our dedicated staff is available <strong>24×7</strong> to assist you at the ground.</p>
    </div>
  </div>
</section>

<!-- ======= Custom CSS ======= -->
<style>
  /* Hero Section */
  .hero-section {
    background: linear-gradient(135deg, #007bff 0%, #6610f2 100%);
    min-height: 45vh;
    padding: 50px 20px;
  }

  /* Card Hover */
  .card-hover {
    transition: all 0.35s ease-in-out;
    border-radius: 15px;
  }
  .card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  }

  .card img {
    height: 160px;
    object-fit: contain;
  }

  /* Icon Circle */
  .icon-circle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  /* Turf Section */
  .turf-info-section {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  }

  /* Responsive */
  @media (max-width: 767px) {
    .hero-section h1 {
      font-size: 2rem;
    }
  }
</style>

{% endblock body %}